<template>
  <div>
    <el-dialog class="bg-white-dialog" :visible.sync="showDialog" width="1120px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div slot="title">
        <div class="flex justify-between align-center padding-right-30">
          <div>
            <span class="color-333333 font-size-18 font-weight-700 padding-right-20">{{title}}</span>
          </div>
          <div>
            <span class="color-666666 padding-right-20">截止{{ fiscalYear }}年{{ fullDate }}</span>
          </div>
        </div>
      </div>

      <div class="flex tab-box">
        <div class="tab cursor-pointer margin-right-10 margin-bottom-10" :class="item.type == currentTab ? 'active' : 'no-active'" v-for="(item, index) in tabList" :key="index" @click="tabChange(item)">{{ item.lable }}</div>
      </div>

      <el-table v-if="currentTab == 'emptyAssetList'" :data="tableData.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)" style="width: 100%" :border="true">
        <el-table-column align="left" label="资产编号" prop="assetName"></el-table-column>
        <el-table-column align="left" label="资产类型">
          <template slot-scope="scope">
            <span>{{ scope.row.assetTypeName || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left">
          <template #header>
            <span>面积(m²)</span>
            <span v-tooltip="'面积(m²)'" class="icon el-icon-question padding-left-5"></span>
          </template>
          <template slot-scope="scope">
            <span>{{scope.row.cadArea || '--'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="空置开始时间">
          <template slot-scope="scope">
            <span v-if="scope.row.emptyDate">{{scope.row.emptyDate | formatDate('YYYY-MM-DD')}}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="空置天数">
          <template slot-scope="scope">
            <span>{{ scope.row.emptyDays ? scope.row.emptyDays + '天' : '无租赁记录' }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-table v-else :data="tableData.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)" style="width: 100%" :border="true">
        <el-table-column align="left" label="商铺" prop="abscissa"></el-table-column>
        <el-table-column align="left" label="欠费(万元)" prop="arrearsAmount">
          <template #header>
            <span>欠费(万元)</span>
            <span v-tooltip="'欠费(万元)'" class="icon el-icon-question padding-left-5"></span>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.arrearsAmount | moneyFilterNoUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="保证金(万元)" prop="depositAmount">
          <template slot-scope="scope">
            <span>{{ scope.row.depositAmount | moneyFilterNoUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="欠费占比">
          <template slot-scope="scope">
            <span>{{ Math.abs(scope.row.arrearsRate || 0) | accMul }}%</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="text-align-right margin-top-20">
        <el-pagination :hide-on-single-page="true" :current-page.sync="pageNumber" :page-size="pageSize" layout="prev, pager, next" :total="tableData.length"> </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { apiCollectionRentalDetail } from '@a/about';

  import dayjs from 'dayjs';

  export default {
    props: {
      selectTime: {
        type: Number,
        default: 0,
      },
      universalParams: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },

    computed: {
      fiscalYear() {
        return dayjs(this.selectTime).format('YYYY');
      },
      fiscalMonth() {
        let date = dayjs(this.selectTime).format('YYYY-MM-DD');
        let month = date.split('-')[1];
        return Number(month);
      },
      fullDate() {
        let date = this.getMonthFinalDay(this.fiscalYear, this.fiscalMonth);
        let month = date.split('-')[1];
        let day = date.split('-')[2];
        return month + '月' + day + '日';
      }
    },

    data() {
      return {
        showDialog: false,
        tableData: [],
        currentTab: 'leArrearsList',
        tabList: [
          {
            type: 'leArrearsList',
            lable: '欠费(30天以内)',
          },
          {
            type: 'betweenArrearsList',
            lable: '欠费(30天-90天)',
          },
          {
            type: 'geArrearsList',
            lable: '欠费(90天以上)',
          },
          {
            type: 'emptyAssetList',
            lable: '空置',
          },
        ],
        pageSize: 10,
        pageNumber: 1,
        total: 0,
        model: {},
        title:""
      };
    },

    methods: {
      init(type) {
        this.currentTab = type == 10 ? 'leArrearsList' : 'emptyAssetList';
        this.getData();
        this.showDialog = true;
        this.title = type == 10 ? "收缴率" : "出租率"
      },

      //tab切换
      async tabChange(item) {
        this.currentTab = item.type;
        this.tableData = this.model[item.type] || [];
      },

      async getData() {
        let res = await apiCollectionRentalDetail(this.universalParams);
        this.model = res;
        this.tableData = this.model[this.currentTab] || [];
      },

      //获取月最后一天的日期
      getMonthFinalDay(year, month) {
        var day = '';
        if (year == null || year == undefined || year == '') {
          year = new Date().getFullYear();
        }
        if (month == null || month == undefined || month == '') {
          month = new Date().getMonth() + 1;
        }
        day = new Date(new Date(year, month).setDate(0)).getDate();
        return year + '-' + month + '-' + day;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .tab-box {
    margin-top: -17px;
    .tab {
      height: 38px;
      line-height: 38px;
      text-align: center;
      padding: 0 10px;
    }
  }

  .active {
    background: rgba($color: #3384fe, $alpha: 0.1);
    border-radius: 3px;
    color: #3384fe;
  }
  .no-active {
    background: rgba($color: #d1cbcb, $alpha: 0.1);
    border-radius: 3px;
    color: #333;
  }
</style>
